<template>
  <div class="home">
    <common-table
    :tableData="tableData"
    :columns="columns"
    :options="options"
    :pagination="pagination"
    :fetch="getList"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"></common-table>
  </div>
</template>

<script>
import commonTable from './../components/Table-Template'
export default {
  components: {
    commonTable
  },
  data () {
    return {

      hobby: [
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }
      ],

      // 表格数据
      tableData: [
        {
          name: '张三',
          age: '18',
          hobby: '选项1',
          time: ''
        },
        {
          name: '李四',
          age: '19',
          hobby: '选项2',
          time: ''
        }
      ],
      // 列数据参数
      columns: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '年龄',
          prop: 'age'
        },
        {
          label: '爱好',
          prop: 'hobby',
          render: (h, params) => {
            // vue render 写法
            // return h('el-select',{
            //     props: {
            //       value: params.row.hobby,
            //     },
            //     on: {
            //       'change':(event)=>{
            //         console.log(event)
            //         params.row.hobby=event
            //       }
            //     }
            //   },
            //   this.hobby.map(item=>{
            //     return h('el-option',{
            //       props:{
            //         value:item.value
            //       }
            //     },item.label)
            //   })
            // )

            // 以下是 jsx 写法
            // jsx 第一种写法 使用 v-model 需要配置 babel , plugins: ['jsx-v-model'], 重启服务就可以生效
            // return (
            //   <el-select v-model={params.row.hobby}>
            //     {this.hobby.map((k,i)=>(<el-option value={k.value}  key={i}>{k.label}</el-option>))}
            //   </el-select>
            // )
            // return (
            //   <el-select v-model={params.row.hobby}>
            //    <el-option value='选项1'>双皮奶</el-option>
            //    <el-option value='选项2'>黄金糕</el-option>
            //   </el-select>
            // )

            // jsx第二种写法 不需要插件，需要自己实现v-model,
            // onChange 和 on-change 是等价的
            // 其实v-model的实现就是监听input事件改变value的值，所以绑定 value 和 input
            // 下拉框绑定change事件也有效，推荐使用input, change在某些情况下无效， 如下
            return (
              <el-select value={params.row.hobby} on-change={(e) => { params.row.hobby = e }}>
                {this.hobby.map((k, i) => (<el-option value={k.value}>{k.label}</el-option>))}
              </el-select>
            )
          }
        },
        {
          label: '时间',
          prop: 'time',
          render: (h, params) => {
            // vue render 写法
            // return h('el-date-picker',{
            //   props:{
            //     value:params.row.time,
            //     type:'datetime',
            //     format:"yyyy-MM-dd",
            //     'value-format':"yyyy-MM-dd"
            //   },
            //   on:{
            //     // 这里要监听input 否则日期组件无法取到值
            //     input:(event)=>{
            //       params.row.time=event
            //     }
            //   },
            //   nativeOn:{
            //     // 监听原生DOM事件 阻止冒泡
            //     // click:(event)=>{
            //     //   event.stopPropagation()
            //     // }
            //     // 这种写法也可以，调用外部定义的函数
            //     click:this.handleClick
            //   }
            // })

            // jsx 写法
            // jsx 第一种写法借助插件 使用v-model
            // nativeOnClick 监听原生DOM事件
            return (
              <el-date-picker
                type='datetime'
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                v-model={params.row.time}
                nativeOnClick={(event) => { event.stopPropagation() }}/>
            )
            // jsx 第二种写法 自己实现v-model
            // onInput 和 on-input 是等价的
            // 注意这里不能监听change事件，而是监听input
            // return (
            //    <el-date-picker
            //    type='datetime'
            //    format="yyyy-MM-dd"
            //    value-format="yyyy-MM-dd"
            //    value={params.row.time}
            //    onInput={(e)=>{params.row.time=e}}
            //    nativeOnClick={(event)=>{event.stopPropagation()}}/>
            // )
          }
        },
        {
          button: true,
          label: '操作',
          group: [
            {
              label: '编辑',
              type: 'warning',
              icon: 'el-icon-edit',
              plain: true,
              disabled: false,
              onClick: (row, index) => {
                this.handleEdit(row, index)
              }
            },
            {
              label: '删除',
              type: 'danger',
              icon: 'el-icon-delete',
              plain: false,
              disabled: false,
              onClick: (row, index) => {
                this.handleDel(row, index)
              }
            }
          ]
        }
      ],

      // 分页参数
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 15,
        pageSizeArr: [20, 100]
      },

      // table 的参数
      options: {
        mutiSelect: true,
        index: true, // 显示序号， 多选则 mutiSelect
        loading: false, // 表格动画
        initTable: true // 是否一挂载就加载数据
      }
    }
  },
  methods: {
    // 阻止冒泡
    handleClick (event) {
      event.stopPropagation()
    },
    getList () {
      // loading 请求前为设为true， 成功和失败置为false
      //  this.options.loading = true
    },
    handleSelectionChange (selection) {
      console.log(selection)
    },
    handleEdit (row, index) {
      console.log('编辑', row, index)
    },
    handleDel (row, index) {
      console.log('删除', row, index)
    },
    handleRowClick (row, event, column) {
      console.log('click row:', row, event, column)
    }
  }
}
</script>
